<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<link href="/webjars/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">-->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">

</head>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->

<!--<script src="/webjars/jquery/3.4.1/jquery.js"></script>-->
<script th:src="@{/js/jquery.min.js}"></script>
<!--<script src="/webjars/bootstrap/4.3.1/js/bootstrap.js"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--<script th:src="@{/js/tableExport.js}"></script>-->
<!--<script th:src="@{/js/bootstrap-table-export.js}"></script>-->
<!--<script th:src="@{/js/bootstrap-table-toolbar.js}"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"-->
        <!--integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"-->
        <!--crossorigin="anonymous"></script>-->
<!--<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>-->
<!--<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>-->

<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript">
    //点击新增按钮弹出模态框。
    function gettjmtk() {
        $("#empAddModal").modal({
            backdrop: "static"
        });
    };

    // 添加成功
    function savespkfk() {
        $.ajax({
            url: "/ypxspt/sysSpkfk/insertspkfk",
            type: 'POST',
            data: $("#empAddModal form").serialize(),
            success: function (result) {
                if (result != null) {
                    alert("添加商品成功！！！");
                    $("#empAddModal").modal('hide');
                }
            }
        });
    };

    //点击编辑按钮弹出模态框。
    function updatetjmtk(obj) {
        var spid = obj.getAttribute("id");
        $.ajax({
            url: "/ypxspt/sysSpkfk/getspkfk/" + spid,
            type: 'GET',
            success: function (result) {
                //console.log(retult);
                $("#empUpdateModal").modal({
                    backdrop: "static"
                });
                $("#spid_update_static").text(result.spid);
                $("#spmch_update_input").val(result.spmch);
                $("#shpgg_update_input").val(result.shpgg);
                $("#shpchd_update_input").val(result.shpchd);
                $("#pizhwh_update_input").val(result.pizhwh);
                $("#emp_update_btn").val(result.spid);
            }
        });
    };

    // 更新完成
    function updatespkfk(obj) {
        var spid = obj.getAttribute("value");
        alert(spid);
        $.ajax({
            url: "/ypxspt/sysSpkfk/editspkfk/" + spid,
            type: 'PUT',
            data: $("#empUpdateModal form").serialize(),
            success: function (result) {
                if (result != null) {
                    alert("更新成功！！！");
                    $("#empUpdateModal").modal('hide');
                }
            },
        });
    };

    // 单个删除
    $(document).on("click", ".delete_btn", function () {
        var spmch = $(this).parents("tr").find("th:eq(2)").text();
        if (confirm("确认删除【" + spmch + "】吗？")) {
            deletspkfk(this);
        }
    });

    // 单个删除
    function deletspkfk(obj) {
        var spid = obj.getAttribute("value");
        $.ajax({
            url: "/ypxspt/sysSpkfk/deletespkfk/" + spid,
            type: 'delete',
            success: function (result) {
                if (result != null) {
                    alert("删除成功！！！");
                }
            },
        });
    };

    $(document).ready(function () {
        // checkbox全选与不全选
        $("#check_all").click(function () {
            // alert($(this).prop("checked"));
            $(".check_item").prop("checked", $(this).prop("checked"));
        });
        // 勾选checkbox后多个删除
        $("#emp_delete_all_btn").click(function () {
            var spmch = "";
            var del_spids = "";
            $.each($(".check_item:checked"), function () {
                spmch += $(this).parents("tr").find("th:eq(2)").text() + "，";
                del_spids += $(this).parents("tr").find("th:eq(1)").text() + "-";
            });
            alert(del_spids);
            spmch = spmch.substring(0, spmch.length - 1);
            del_spids = del_spids.substring(0, del_spids.length - 1);
            alert(del_spids);
            if (confirm("确认删除【" + spmch + "】吗？？？")) {
                $.ajax({
                    url: "/ypxspt/sysSpkfk/deleteallspkfk/" + del_spids,
                    type: 'DELETE',
                    success: function (result) {
                        if (result != null) {
                            alert("删除成功！！！");
                        }
                    },
                });
            };
        });
    });
    // checkbox全选与不全选
    $(document).on("click", ".check_item", function () {
        var flag = $(".check_item:checked").length == $(".check_item").length;
        $("#check_all").prop("checked", flag);
    });
</script>
<body>
<!--修改商品信息的模态框-->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改商品信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品ID号</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="spid_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="spmch" class="form-control" id="spmch_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品规格</label>
                        <div class="col-sm-10">
                            <input type="text" name="shpgg" class="form-control" id="shpgg_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品产地</label>
                        <div class="col-sm-10">
                            <input type="text" name="shpchd" class="form-control" id="shpchd_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">批准文号</label>
                        <div class="col-sm-10">
                            <input type="text" name="pizhwh" class="form-control" id="pizhwh_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn" onclick="updatespkfk(this)">更新
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 添加商品信息的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加商品信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品ID号</label>
                        <div class="col-sm-10">
                            <input type="text" name="spid" class="form-control" id="spid_add_input"
                                   placeholder="商品ID号，以SPH开头">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="spmch" class="form-control" id="spmch_add_input"
                                   placeholder="商品名称">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品规格</label>
                        <div class="col-sm-10">
                            <input type="text" name="shpgg" class="form-control" id="shpgg_add_input"
                                   placeholder="商品规格">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品产地</label>
                        <div class="col-sm-10">
                            <input type="text" name="shpchd" class="form-control" id="shpchd_add_input"
                                   placeholder="商品产地">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">批准文号</label>
                        <div class="col-sm-10">
                            <input type="text" name="pizhwh" class="form-control" id="pizhwh_add_input"
                                   placeholder="批准文号">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn" onclick="savespkfk()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12">
            <h1>商品资料-CRUD</h1>
        </div>
    </div>
    <div class="row">
        <form class="form-inline" id="formList">
            <div class="form-group">
                <label for="chanApplication" class="sr-only">搜索条件</label>
                <input type="text" class="form-control" id="chanApplication" placeholder="请输入商品名称"
                       name="chanApplication">
            </div>
            <div class="form-group">
                <a class="btn btn-primary" id="submit">查询</a>
            </div>
        </form>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn" onclick="gettjmtk()">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
            <a th:href="@{/ypxspt/sysSpkfk/exportExcel}" class="btn btn-danger" id="exportExcel">导出</a>
        </div>
    </div>
    <!--显示的表格数据-->
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered table-hover" id="spkfk">
                <tr>
                    <th><input type='checkbox' id='check_all'/></th>
                    <th>商品ID号</th>
                    <th>商品名称</th>
                    <th>商品规格</th>
                    <th>商品产地</th>
                    <th>批准文号</th>
                    <th>操作</th>
                </tr>
                <tr th:each="sysSpkfk : ${pageInfo.list}">
                    <th><input type='checkbox' class='check_item'/></th>
                    <th th:text="${sysSpkfk.spid}">商品ID号</th>
                    <th th:text="${sysSpkfk.spmch}">商品名称</th>
                    <th th:text="${sysSpkfk.shpgg}">商品规格</th>
                    <th th:text="${sysSpkfk.shpchd}">商品产地</th>
                    <th th:text="${sysSpkfk.pizhwh}">批准文号</th>
                    <th>
                        <a class="btn btn-primary btn-sm" onclick="updatetjmtk(this)" th:id="${sysSpkfk.spid}"
                                th:value="${sysSpkfk.spid}">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                        </a>
                        <button class="btn btn-danger btn-sm delete_btn" th:id="${sysSpkfk.spid}"
                                th:value="${sysSpkfk.spid}">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true">删除</span>
                        </button>
                    </th>
                </tr>
            </table>
            <!-- 显示分页信息 -->
            <div class="row">
                <!--分页文字信息  -->
                <div class="col-md-6"
                     th:text="'当前'+${pageInfo.pageNum} +'页,共'+${pageInfo.pages}+'页,共'+${pageInfo.total}+'条记录'"></div>
                <!-- 分页条信息 -->
                <div class="col-md-6">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <th:block th:if="${pageInfo.hasPreviousPage}==true">
                                <li><a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${1}}">首页</a></li>
                                <li>
                                    <a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.prePage}}"
                                       aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </th:block>
                            <th:block th:if="${pageInfo.hasPreviousPage}==false">
                                <li th:class="disabled"><a
                                        th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${1}}">首页</a></li>
                                <li th:class="disabled">
                                    <a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.prePage}}"
                                       aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </th:block>

                            <!--<li th:if="${navigatepageNums}<${pageInfo.pageNum}"-->
                            <!--th:each="navigatepageNums: ${pageInfo.navigatepageNums}"><a href="#"-->
                            <!--th:text="${navigatepageNums}"></a>-->
                            <!--</li>-->
                            <!--<li th:if="${navigatepageNums}==${pageInfo.pageNum}" th:class="active"-->
                            <!--th:each="navigatepageNums: ${pageInfo.navigatepageNums}"><a href="#"-->
                            <!--th:text="${navigatepageNums}"></a>-->
                            <!--</li>-->
                            <!--<li th:if="${navigatepageNums}>${pageInfo.pageNum}"-->
                            <!--th:each="navigatepageNums: ${pageInfo.navigatepageNums}"><a href="#"-->
                            <!--th:text="${navigatepageNums}"></a>-->
                            <!--</li>-->
                            <th:block th:each="nav : ${pageInfo.navigatepageNums}">
                                <li th:class="${nav==pageInfo.pageNum}?'active':''"><a
                                        th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${nav}}"
                                        th:text="${nav}"></a></li>
                            </th:block>

                            <th:block th:if="${pageInfo.hasNextPage}==false">
                                <li th:class="disabled">
                                    <a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.nextPage}}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li th:class="disabled"><a
                                        th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.pages}}">末页</a>
                                </li>
                            </th:block>
                            <th:block th:if="${pageInfo.hasNextPage}==true">
                                <li>
                                    <a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.nextPage}}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li><a th:href="@{'/ypxspt/sysSpkfk/getspkfkbyspmch?pn='+${pageInfo.pages}}">末页</a></li>
                            </th:block>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<hr>
<hr>
<hr>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>商品条码：</p>
                            <input type="text" name="sptm"/>
                        </li>
                        <li>
                            <p>通用名称：</p>
                            <input type="text" name="spmch"/>
                        </li>
                        <li>
                            <p>助记码：</p>
                            <input type="text" name="zjm"/>
                        </li>
                        <li>
                            <p>产地：</p>
                            <input type="text" name="shpchd"/>
                        </li>
                        <li>
                            <p>商品规格：</p>
                            <input type="text" name="shpgg"/>
                        </li>
                        <li>
                            <p>别名：</p>
                            <input type="text" name="tongym"/>
                        </li>
                        <li>
                            <p>生产厂家：</p>
                            <input type="text" name="shengccj"/>
                        </li>
                        <li>
                            <p>批准文号：</p>
                            <input type="text" name="pizhwh"/>
                        </li>
                        <li>
                            <p>剂型：</p>
                            <input type="text" name="jixing"/>
                        </li>
                        <li>
                            <p>类别：</p>
                            <input type="text" name="leibie"/>
                        </li>
                        <li>
                            <p>档案编号：</p>
                            <input type="text" name="dabh"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<script th:inline="javascript">
    $(document).ready(function () {
        initUserTable();
        function initUserTable() {
            $("#bootstrap-table").bootstrapTable({
                url: "/ypxspt/sysSpkfk/pageInfospkfk/",
                modalName: "商品信息",
                toolbar: '#toolbar',
                method:"post",
                striped:true,
                showExport: true,
                showHeader: true,
                pagination: true,
                search:true,
                showRefresh: true,
                showFullscreen:true,
                showColumnsToggleAll:true,
                cache: false,
                clickToSelect:true,
                showToggle: true,
                cardView: false,                    //是否显示详细视图
                detailView: true,
                detailFormatter:"detailFormatter",
                showPaginationSwitch:true,
                paginationLoop: true,
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                showColumns: true,
                // responseHandler:"responseHandler",
                showFooter:true, //是否显示列脚
                contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
                dataType: "json",
                columns: [
                    {
                        field: 'spid',
                        title: '商品内码',
                    },
                    {
                        field: 'spbh',
                        title: '商品编号'
                    },
                    {
                        field: 'sptm',
                        title: '商品条码'
                    },
                    {
                        field: 'spmch',
                        title: '通用名称',
                        sortable: true,
                    },
                    {
                        field: 'dw',
                        title: '包装单位'
                    },
                    {
                        field: 'shpchd',
                        title: '产地'
                    },
                    {
                        field: 'shpgg',
                        title: '商品规格'
                    },
                    {
                        field: 'tongym',
                        title: '别名'
                    },
                    {
                        field: 'shengccj',
                        title: '生产厂家'
                    },
                    {
                        field: 'pizhwh',
                        title: '批准文号'
                    },
                    {
                        field: 'jixing',
                        title: '剂型'
                    },
                    {
                        field: 'youxq',
                        title: '有效期',
                        sortable: true,
                    },
                    {
                        field: 'leibie',
                        title: '类别'
                    },
                    {
                        field: 'pizhwhyxq',
                        title: '批准文号有效期'
                    },
                    {
                        field: 'dabh',
                        title: '档案编号'
                    },
                    {
                        field: 'jxq',
                        title: '是否近效期'
                    }]
            })
        }
    });
    var selections = []

    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        })
    }
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1
        })
        return res
    }

    function detailFormatter(index, row) {
        var html = []
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>')
        })
        return html.join('')
    }
</script>

<!--<style>-->
    <!--.select,-->
    <!--#locale {-->
        <!--width: 100%;-->
    <!--}-->
    <!--.like {-->
        <!--margin-right: 10px;-->
    <!--}-->
<!--</style>-->

<!--<div class="select">-->
    <!--<select class="form-control" id="locale">-->
        <!--<option value="af-ZA">af-ZA</option>-->
        <!--<option value="ar-SA">ar-SA</option>-->
        <!--<option value="ca-ES">ca-ES</option>-->
        <!--<option value="cs-CZ">cs-CZ</option>-->
        <!--<option value="da-DK">da-DK</option>-->
        <!--<option value="de-DE">de-DE</option>-->
        <!--<option value="el-GR">el-GR</option>-->
        <!--<option value="en-US" selected>en-US</option>-->
        <!--<option value="es-AR">es-AR</option>-->
        <!--<option value="es-CL">es-CL</option>-->
        <!--<option value="es-CR">es-CR</option>-->
        <!--<option value="es-ES">es-ES</option>-->
        <!--<option value="es-MX">es-MX</option>-->
        <!--<option value="es-NI">es-NI</option>-->
        <!--<option value="es-SP">es-SP</option>-->
        <!--<option value="et-EE">et-EE</option>-->
        <!--<option value="eu-EU">eu-EU</option>-->
        <!--<option value="fa-IR">fa-IR</option>-->
        <!--<option value="fi-FI">fi-FI</option>-->
        <!--<option value="fr-BE">fr-BE</option>-->
        <!--<option value="fr-FR">fr-FR</option>-->
        <!--<option value="he-IL">he-IL</option>-->
        <!--<option value="hr-HR">hr-HR</option>-->
        <!--<option value="hu-HU">hu-HU</option>-->
        <!--<option value="id-ID">id-ID</option>-->
        <!--<option value="it-IT">it-IT</option>-->
        <!--<option value="ja-JP">ja-JP</option>-->
        <!--<option value="ka-GE">ka-GE</option>-->
        <!--<option value="ko-KR">ko-KR</option>-->
        <!--<option value="ms-MY">ms-MY</option>-->
        <!--<option value="nb-NO">nb-NO</option>-->
        <!--<option value="nl-NL">nl-NL</option>-->
        <!--<option value="pl-PL">pl-PL</option>-->
        <!--<option value="pt-BR">pt-BR</option>-->
        <!--<option value="pt-PT">pt-PT</option>-->
        <!--<option value="ro-RO">ro-RO</option>-->
        <!--<option value="ru-RU">ru-RU</option>-->
        <!--<option value="sk-SK">sk-SK</option>-->
        <!--<option value="sv-SE">sv-SE</option>-->
        <!--<option value="th-TH">th-TH</option>-->
        <!--<option value="tr-TR">tr-TR</option>-->
        <!--<option value="uk-UA">uk-UA</option>-->
        <!--<option value="ur-PK">ur-PK</option>-->
        <!--<option value="uz-Latn-UZ">uz-Latn-UZ</option>-->
        <!--<option value="vi-VN">vi-VN</option>-->
        <!--<option value="zh-CN">zh-CN</option>-->
        <!--<option value="zh-TW">zh-TW</option>-->
    <!--</select>-->
<!--</div>-->

<!--<div id="toolbar">-->
    <!--<button id="remove" class="btn btn-danger" disabled>-->
        <!--<i class="glyphicon glyphicon-remove"></i> Delete-->
    <!--</button>-->
<!--</div>-->
<!--<table-->
        <!--id="table"-->
        <!--data-toolbar="#toolbar"-->
        <!--data-search="true"-->
        <!--data-show-refresh="true"-->
        <!--data-show-toggle="true"-->
        <!--data-show-fullscreen="true"-->
        <!--data-show-columns="true"-->
        <!--data-show-columns-toggle-all="true"-->
        <!--data-detail-view="true"-->
        <!--data-show-export="true"-->
        <!--data-click-to-select="true"-->
        <!--data-detail-formatter="detailFormatter"-->
        <!--data-minimum-count-columns="2"-->
        <!--data-show-pagination-switch="true"-->
        <!--data-pagination="true"-->
        <!--data-id-field="id"-->
        <!--data-page-list="[10, 25, 50, 100, all]"-->
        <!--data-show-footer="true"-->
        <!--data-side-pagination="server"-->
        <!--data-url="http://localhost:8080/ypxspt/sysSpkfk/getspkfkbyspmch"-->
        <!--data-response-handler="responseHandler">-->
<!--</table>-->

<!--<script>-->
    <!--var $table = $('#table')-->
    <!--var $remove = $('#remove')-->
    <!--var selections = []-->

    <!--function getIdSelections() {-->
        <!--return $.map($table.bootstrapTable('getSelections'), function (row) {-->
            <!--return row.id-->
        <!--})-->
    <!--}-->

    <!--function responseHandler(res) {-->
        <!--$.each(res.rows, function (i, row) {-->
            <!--row.state = $.inArray(row.id, selections) !== -1-->
        <!--})-->
        <!--return res-->
    <!--}-->

    <!--function detailFormatter(index, row) {-->
        <!--var html = []-->
        <!--$.each(row, function (key, value) {-->
            <!--html.push('<p><b>' + key + ':</b> ' + value + '</p>')-->
        <!--})-->
        <!--return html.join('')-->
    <!--}-->

    <!--function operateFormatter(value, row, index) {-->
        <!--return [-->
            <!--'<a class="like" href="javascript:void(0)" title="Like">',-->
            <!--'<i class="fa fa-heart"></i>',-->
            <!--'</a>  ',-->
            <!--'<a class="remove" href="javascript:void(0)" title="Remove">',-->
            <!--'<i class="fa fa-trash"></i>',-->
            <!--'</a>'-->
        <!--].join('')-->
    <!--}-->

    <!--window.operateEvents = {-->
        <!--'click .like': function (e, value, row, index) {-->
            <!--alert('You click like action, row: ' + JSON.stringify(row))-->
        <!--},-->
        <!--'click .remove': function (e, value, row, index) {-->
            <!--$table.bootstrapTable('remove', {-->
                <!--field: 'spid',-->
                <!--values: [row.spid]-->
            <!--})-->
        <!--}-->
    <!--}-->

    <!--function totalTextFormatter(data) {-->
        <!--return 'Total'-->
    <!--}-->

    <!--function totalNameFormatter(data) {-->
        <!--return data.length-->
    <!--}-->

    <!--function totalPriceFormatter(data) {-->
        <!--var field = this.field-->
        <!--return '$' + data.map(function (row) {-->
            <!--return +row[field].substring(1)-->
        <!--}).reduce(function (sum, i) {-->
            <!--return sum + i-->
        <!--}, 0)-->
    <!--}-->

    <!--function initTable() {-->
        <!--$table.bootstrapTable('destroy').bootstrapTable({-->
            <!--height: 550,-->
            <!--locale: $('#locale').val(),-->
            <!--columns: [-->
                <!--{-->
                    <!--field: 'state',-->
                    <!--checkbox: true,-->
                    <!--align: 'center',-->
                    <!--valign: 'middle'-->
                <!--}, {-->
                    <!--title: '商品ID号',-->
                    <!--field: 'spid',-->
                    <!--align: 'center',-->
                    <!--valign: 'middle',-->
                    <!--sortable: true,-->
                    <!--footerFormatter: totalTextFormatter-->
                <!--}, {-->
                    <!--title: '商品名称',-->
                    <!--field: 'spmch',-->
                    <!--align: 'center',-->
                    <!--valign: 'middle',-->
                    <!--sortable: true,-->
                    <!--footerFormatter: totalNameFormatter,-->
                <!--},-->
                <!--{-->
                    <!--field: 'shpgg',-->
                    <!--title: '商品规格',-->
                    <!--sortable: true,-->
                    <!--footerFormatter: totalNameFormatter,-->
                    <!--align: 'center'-->
                <!--}, {-->
                    <!--field: 'shpchd',-->
                    <!--title: '商品产地',-->
                    <!--sortable: true,-->
                    <!--align: 'center',-->
                    <!--footerFormatter: totalNameFormatter,-->
                <!--}, {-->
                    <!--field: 'pizhwh',-->
                    <!--title: '批准文号',-->
                    <!--sortable: true,-->
                    <!--align: 'center',-->
                    <!--footerFormatter: totalNameFormatter,-->
                <!--}, {-->
                    <!--field: 'operate',-->
                    <!--title: 'Item Operate',-->
                    <!--align: 'center',-->
                    <!--clickToSelect: false,-->
                    <!--events: window.operateEvents,-->
                    <!--formatter: operateFormatter-->
                <!--}-->
            <!--]-->
        <!--})-->
        <!--$table.on('check.bs.table uncheck.bs.table ' +-->
            <!--'check-all.bs.table uncheck-all.bs.table',-->
            <!--function () {-->
                <!--$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)-->

                <!--// save your data, here just save the current page-->
                <!--selections = getIdSelections()-->
                <!--// push or splice the selections if you want to save all data selections-->
            <!--})-->
        <!--$table.on('all.bs.table', function (e, name, args) {-->
            <!--console.log(name, args)-->
        <!--})-->
        <!--$remove.click(function () {-->
            <!--var ids = getIdSelections()-->
            <!--$table.bootstrapTable('remove', {-->
                <!--field: 'spid',-->
                <!--values: ids-->
            <!--})-->
            <!--$remove.prop('disabled', true)-->
        <!--})-->
    <!--}-->

    <!--$(function() {-->
        <!--initTable()-->

        <!--$('#locale').change(initTable)-->
    <!--})-->
<!--</script>-->
</body>
</html>